<template>
  <div id="treechart">
    <el-row>
      <el-col :span="6">
        <div id="treeData">
          <el-tree :data="data" :props="props" default-expand-all @node-click="handleNodeClick"></el-tree>
        </div>
      </el-col>
      <el-col :span="18">
        <div id="tree"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {TreeChart} from './TreeChart'
export default {
  data () {
    return {
      data: [],
      props: {
        children: 'children',
        label: 'name'
      },
      treeData: {},
      treeChart: {}
    }
  },
  created () {
    this.treeChart = new TreeChart('tree')
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      let res = await this.$http.get('./static/data/province.json')
      this.treeData = res.data
      this.treeChart.data = this.treeData
      this.data.push(this.treeData)
      this.treeChart.draw()
    },
    handleNodeClick (data) {
      console.log(data)
    }
  }
}
</script>
<style scoped>
   #treechart {
       height: 100%;
       width: 100%;
   }
   #treechart>.el-row {
       height: 100%;
   }
   #treechart>.el-row>.el-col {
       height: 100%;
   }
   #tree {
       height: 100%;
       width: 100%;
   }
</style>
